<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>JSON转Excel工具</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 800px;
            margin-top: 50px;
            margin-bottom: 50px;
        }
        .json-input {
            min-height: 300px;
            font-family: monospace;
        }
        .error-message {
            color: red;
            margin-top: 10px;
        }
        .footer {
            text-align: center;
            padding: 20px 0;
            background-color: #f8f9fa;
            position: fixed;
            bottom: 0;
            width: 100%;
            border-top: 1px solid #dee2e6;
        }
        .loading-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        .loading-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            border-radius: 5px;
            text-align: center;
        }
        .loading-spinner {
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
            margin: 20px auto;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .format-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        .format-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 700px;
            border-radius: 5px;
        }
        .format-example {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            font-family: monospace;
            white-space: pre-wrap;
            overflow-x: auto;
        }
        .close-btn {
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .close-btn:hover {
            color: #f44336;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-4">JSON转Excel工具</h1>
        
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>方法1：粘贴JSON数据</span>
                <button id="formatButton" class="btn btn-sm btn-outline-info">数据格式提示</button>
            </div>
            <div class="card-body">
                <textarea id="jsonInput" class="form-control json-input" 
                    placeholder="请在此处粘贴JSON数据..."></textarea>
                <button id="pasteButton" class="btn btn-primary mt-3">导出Excel</button>
                <div id="pasteError" class="error-message"></div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                方法2：上传JSON文件
            </div>
            <div class="card-body">
                <form id="uploadForm">
                    <div class="mb-3">
                        <input type="file" class="form-control" id="fileInput" accept=".json,.txt">
                    </div>
                    <button type="submit" class="btn btn-primary">导出Excel</button>
                </form>
                <div id="uploadError" class="error-message"></div>
            </div>
        </div>
    </div>

    <!-- 加载提示弹框 -->
    <div id="loadingModal" class="loading-modal">
        <div class="loading-content">
            <h3>正在处理数据，请稍候...</h3>
            <div class="loading-spinner"></div>
            <p id="loadingMessage">正在努力工作，请耐心等待...</p>
        </div>
    </div>

    <!-- 数据格式提示弹框 -->
    <div id="formatModal" class="format-modal">
        <div class="format-content">
            <span class="close-btn" id="closeFormatModal">&times;</span>
            <h3>数据格式参考</h3>
            <p>请按照以下格式粘贴数据：</p>
            <div class="format-example">{total:0, rows:[{bankNo:'xxx',startDate:'xxx',devType:'xxx',devId:'xxx',gzh:'xxx',cashType:'xxx',cashValue:'xxx',batchNo:'xx',cashVer:'',quality:'xx',imgName:'xx',trInfo:'xx',trType:'xx',boxMon:''}]}</div>
            <p class="mt-3">说明：</p>
            <ul>
                <li>数据必须包含 <code>total</code> 和 <code>rows</code> 字段</li>
                <li><code>rows</code> 字段必须是一个数组，包含多个对象</li>
                <li>每个对象必须包含 <code>bankNo</code>, <code>startDate</code>, <code>devType</code> 等字段</li>
                <li>字段值可以使用单引号或双引号，系统会自动处理</li>
                <li>多个JSON对象之间可以有空格、换行或制表符，系统会自动处理</li>
            </ul>
        </div>
    </div>

    <footer class="footer">
        <div class="container">
            <p class="mb-0">周美玲专用，已使用次数: <span th:text="${usageCount}">0</span></p>
        </div>
    </footer>

    <script>
        // 随机等待消息
        const loadingMessages = [
            "正在努力工作，请耐心等待...",
            "正在数钱，数到手抽筋...",
            "正在整理数据，马上就好...",
            "正在喝咖啡提神，马上回来...",
            "正在思考人生，顺便处理数据...",
            "正在和Excel谈判，请稍等...",
            "正在召唤Excel精灵，马上就好...",
            "正在给数据洗澡，马上干净了...",
            "正在给数据做美容，马上漂亮了...",
            "正在给数据做按摩，马上舒服了...",
            "正在给数据做瑜伽，马上灵活了...",
            "正在给数据做SPA，马上放松了...",
            "正在给数据做针灸，马上健康了...",
            "正在给数据做推拿，马上舒服了...",
            "正在给数据做足疗，马上轻松了...",
            "正在给数据做头发，马上漂亮了...",
            "正在给数据做指甲，马上精致了...",
            "正在给数据做眉毛，马上有神了...",
            "正在给数据做睫毛，马上迷人了...",
            "正在给数据做嘴唇，马上性感了..."
        ];

        // 显示加载弹框
        function showLoadingModal() {
            const modal = document.getElementById('loadingModal');
            const messageElement = document.getElementById('loadingMessage');
            const randomIndex = Math.floor(Math.random() * loadingMessages.length);
            messageElement.textContent = loadingMessages[randomIndex];
            modal.style.display = 'block';
            
            // 记录显示时间
            modal.dataset.showTime = Date.now();
        }

        // 隐藏加载弹框
        function hideLoadingModal() {
            const modal = document.getElementById('loadingModal');
            const showTime = parseInt(modal.dataset.showTime || '0');
            const currentTime = Date.now();
            const elapsedTime = currentTime - showTime;
            const minDisplayTime = 6000; // 6秒
            
            // 如果显示时间不足10秒，则延迟关闭
            if (elapsedTime < minDisplayTime) {
                setTimeout(() => {
                    modal.style.display = 'none';
                }, minDisplayTime - elapsedTime);
            } else {
                modal.style.display = 'none';
            }
        }

        // 显示数据格式提示弹框
        function showFormatModal() {
            const modal = document.getElementById('formatModal');
            modal.style.display = 'block';
        }

        // 隐藏数据格式提示弹框
        function hideFormatModal() {
            const modal = document.getElementById('formatModal');
            modal.style.display = 'none';
        }

        // 数据格式提示按钮点击事件
        document.getElementById('formatButton').addEventListener('click', showFormatModal);

        // 关闭数据格式提示弹框
        document.getElementById('closeFormatModal').addEventListener('click', hideFormatModal);

        // 点击弹框外部关闭弹框
        window.addEventListener('click', (event) => {
            const modal = document.getElementById('formatModal');
            if (event.target === modal) {
                hideFormatModal();
            }
        });

        document.getElementById('pasteButton').addEventListener('click', async () => {
            const jsonInput = document.getElementById('jsonInput');
            const errorDiv = document.getElementById('pasteError');
            
            try {
                showLoadingModal();
                const response = await fetch('/paste', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'text/plain'
                    },
                    body: jsonInput.value
                });

                hideLoadingModal();
                if (response.ok) {
                    const blob = await response.blob();
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'cash_details.xlsx';
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    document.body.removeChild(a);
                    errorDiv.textContent = '';
                } else {
                    const error = await response.text();
                    errorDiv.textContent = error;
                }
            } catch (error) {
                hideLoadingModal();
                errorDiv.textContent = '处理失败: ' + error.message;
            }
        });

        document.getElementById('uploadForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const fileInput = document.getElementById('fileInput');
            const errorDiv = document.getElementById('uploadError');
            
            if (!fileInput.files[0]) {
                errorDiv.textContent = '请选择文件';
                return;
            }

            const formData = new FormData();
            formData.append('file', fileInput.files[0]);

            try {
                showLoadingModal();
                const response = await fetch('/upload', {
                    method: 'POST',
                    body: formData
                });

                hideLoadingModal();
                if (response.ok) {
                    const blob = await response.blob();
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'cash_details.xlsx';
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    document.body.removeChild(a);
                    errorDiv.textContent = '';
                } else {
                    const error = await response.text();
                    errorDiv.textContent = error;
                }
            } catch (error) {
                hideLoadingModal();
                errorDiv.textContent = '处理失败: ' + error.message;
            }
        });
    </script>
</body>
</html> 